<template>
  <div class="dialog">
    <el-dialog :title="ruleTitle" width="666px" :visible.sync="dialogFormVisible">
      <div class="selected-box">
        <span class="text">课程</span>
        <el-select v-model="subjects" multiple filterable class="select-width" size="small" placeholder="请选择">
          <el-option
            v-for="item in courseList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </div>

      <section>
        <div class="section-left">
          <div class="column">
            <span class="text">开心</span>
            <el-input-number v-model="happy" :step="defaultStep" size="small"></el-input-number>
          </div>
          <div class="column">
            <span class="text">平静</span>
            <el-input-number v-model="calm" :step="defaultStep" size="small"></el-input-number>
          </div>
          <div class="column">
            <span class="text">消极</span>
            <el-input-number v-model="negative" :step="defaultStep" size="small"></el-input-number>
          </div>
          <div class="column">
            <span class="text">正坐</span>
            <el-input-number v-model="sitting" :step="defaultStep" size="small"></el-input-number>
          </div>
        </div>

        <div class="section-right">
          <div class="column">
            <span class="text">趴着</span>
            <el-input-number v-model="prostrate" :step="defaultStep" size="small"></el-input-number>
          </div>
          <div class="column">
            <span class="text">站立</span>
            <el-input-number v-model="stand" :step="defaultStep" size="small"></el-input-number>
          </div>
          <div class="column">
            <span class="text">举手</span>
            <el-input-number v-model="raiseHands" :step="defaultStep" size="small"></el-input-number>
          </div>
          <div class="column">
            <span class="text">伸懒腰</span>
            <el-input-number v-model="stretch" :step="defaultStep" size="small"></el-input-number>
          </div>
        </div>
      </section>

      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogFormVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="submitFormInfo">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import httpInterface from "../../utils/httpInterface";
import {errorMessage, successMessage, warningMessage} from "../../utils/validate";
import { mapState } from "vuex";

export default {
  name: "AddRuleModel",
  components: {},
  data() {
    return {
      dialogFormVisible: false,
      formLabelWidth: '120px',
      ruleTitle: "新添规则",
      defaultStep: 0.01,
      subjects: [],
      happy: 0,
      calm: 0,
      negative: 0,
      sitting: 0,
      prostrate: 0,
      stand: 0,
      stretch: 0,
      raiseHands: 0,
      ruleId: "0",
    }
  },

  computed: {
    ...mapState(["courseList"])
  },

  methods: {
    show(id) {
      this.subjects = [];
      this.happy = 0;
      this.calm = 0;
      this.negative = 0;
      this.sitting = 0;
      this.prostrate = 0;
      this.stand = 0;
      this.stretch = 0;
      this.raiseHands = 0;
      this.ruleId = "0";

      this.dialogFormVisible = true;
      if (id == undefined) {
        this.ruleTitle = '新添规则';
      } else {
        this.ruleTitle = '编辑规则';
        this.readerRuleInfo(id);
      }
    },

    readerRuleInfo(id) {
      let _this = this;
      let params = {
        ruleId: id
      };
      httpInterface.requestGet(httpInterface.URL_RULE_GET_RULE_INFO, params, res => {
        let { code, body } = res.data;
        if (code == 200) {
          let { happy, calm, negative, sitting, prostrate, stand, stretch, raiseHands, ruleId, subInfo } = body;
          _this.happy = Number(happy);
          _this.calm = Number(calm);
          _this.negative = Number(negative);
          _this.sitting = Number(sitting);
          _this.prostrate = Number(prostrate);
          _this.stand = Number(stand);
          _this.stretch = Number(stretch);
          _this.raiseHands = Number(raiseHands);
          _this.ruleId = ruleId;

          let arr = [];
          subInfo.forEach(item => {
            arr.push(item.id);
          })
          _this.subjects = arr;
        } else {
          errorMessage("获取记录规则失败！");
        }
      }, null)
    },

    submitFormInfo() {
      let _this = this;
      let { subjects, happy, calm, negative, sitting, prostrate, stand, stretch, raiseHands, ruleId } = this;
      if (subjects.length == 0) return warningMessage("请选择课程！");

      let params = {
        subjects,
        happy: happy + "",
        calm: calm + "",
        negative: negative + "",
        sitting: sitting + "",
        prostrate: prostrate + "",
        stand: stand + "",
        stretch: stretch + "",
        raiseHands: raiseHands + ""
      };
      if (ruleId != 0) {
        params.ruleId = ruleId;
      }
      let url = ruleId == 0 ? httpInterface.URL_RULE_ADD : httpInterface.URL_RULE_UPDATE;
      httpInterface.requestPost(url, params, res => {
        let { code } = res.data;
        if (code == 200) {
          _this.dialogFormVisible = false;
          successMessage("操作成功！");
          _this.$parent.getScoreRuleList();
        } else {
          errorMessage("操作失败！");
        }
      }, null, false)
    }
  }
}
</script>

<style scoped lang="scss">
section {
  display: flex;
  justify-content: center;

  .section-left,
  .section-right {

    .column {
      margin: 16px 50px;

      .text {
        margin-right: 20px;
        width: 44px;
        text-align: right;
        display: inline-block;
      }
    }
  }
}

.selected-box {
  margin-bottom: 12px;
  margin-left: 10%;

  .text {
    margin-right: 20px;
    width: 44px;
    text-align: right;
    display: inline-block;
  }

  .select-width{
    width: 260px;
  }
}
</style>

<style scoped>
.dialog >>> .el-dialog .el-dialog__body {
  padding: 14px 20px 4px 20px;
}
</style>
